/*
 * Copyright (c) 2011-2018 JFXtras
 *  All rights reserved.
 *
 *  Redistribution and use in source and binary forms, with or without
 *  modification, are permitted provided that the following conditions are met:
 *      * Redistributions of source code must retain the above copyright
 *        notice, this list of conditions and the following disclaimer.
 *      * Redistributions in binary form must reproduce the above copyright
 *        notice, this list of conditions and the following disclaimer in the
 *        documentation and/or other materials provided with the distribution.
 *      * Neither the name of the organization nor the
 *        names of its contributors may be used to endorse or promote products
 *        derived from this software without specific prior written permission.
 *
 *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 *  ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 *  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 *  DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
 *  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 *  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 *  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 *  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 *  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

.background{
    -fx-background-color: white;
}

.header{
    -fx-font-size: 3.5em;
    -fx-font-family: "PingFang SC", "Segoe UI Semilight";
    -fx-text-fill: black;
}

.item-title{
    -fx-font-size: 1em;
    -fx-font-family: "PingFang SC", "Segoe UI";
    -fx-text-fill: black;
}

/*******************************************************************************
 *                                                                             *
 * Push Button                                                                 *
 *                                                                             *
 ******************************************************************************/

.button {
    -fx-padding: 4 12 4 12;

    -fx-border-color: transparent;
    -fx-border-width: 2;

    -fx-background-radius: 0;
    -fx-background-color: #cccccc;

    -fx-font-family: "PingFang SC", "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: black;
}

.button:hover{
    -fx-background-color: #d8d8d8;
}

.button:pressed, .button:default:hover:pressed
{
  -fx-background-color: -fx-primary-color;
  -fx-text-fill: white;
}

.button:focused
{
    -fx-border-color: transparent, black;
    -fx-border-width: 1, 1;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled
{
    -fx-opacity: 0.4;
    -fx-background-color: #cccccc;
    -fx-text-fill: #212121;
}

.button:default
{
    -fx-background-color: #008287;
    -fx-text-fill: #ffffff;
}

.button:default:hover{
    -fx-background-color: #219297;
}


/*******************************************************************************
 *                                                                             *
 * Toggle Button                                                               *
 *                                                                             *
 ******************************************************************************/

.toggle-button {
    -fx-padding: 5 22 5 22;
    -fx-border-style: null;
    -fx-background-radius: 0;

    -fx-background-color: #cccccc;

    -fx-font-family: "PingFang SC", "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: black;

    -fx-border-color: transparent;
    -fx-border-width: 2;
}

.toggle-button:focused {
    -fx-border-color: transparent, black;
    -fx-border-width: 1, 1;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.toggle-button:hover {
    -fx-background-color: #d8d8d8;
    -fx-text-fill: black;
}

.toggle-button:selected {
    -fx-background-color: black;
    -fx-text-fill: white;
}

.toggle-button:selected:hover {
    -fx-background-color: #666;
    -fx-text-fill: white;
}

.toggle-button:disabled {
    -fx-opacity: 0.4;
}

/*******************************************************************************
 *                                                                             *
 * Check Box                                                                   *
 *                                                                             *
 ******************************************************************************/

.check-box {
    ACCENT_COLOR: #2796c4;

    -fx-text-fill: black;
}

/* unselected */
.check-box > .box {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-border-color: #333333;
    -fx-border-width: 2px;
    -fx-border-style: solid;

    -fx-padding: 2px 0px 2px 0px;
}

.check-box > .box > .mark {
    -fx-shape: "M17.939,5.439L7.5,15.889l-5.439-5.449l0.879-0.879L7.5,14.111 l9.561-9.551L17.939,5.439z";

    -fx-pref-width: 16px;
    -fx-pref-height: 12px;

    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

/* hover */
.check-box:hover > .box, .check-box:selected:hover > .box  {
    -fx-border-color: #333333;
}

/* selected */
.check-box:selected > .box{
    -fx-background-color: ACCENT_COLOR;
    -fx-border-color: ACCENT_COLOR;
}

.check-box:selected > .box > .mark{
    -fx-background-color: white;
}

/* pressed */
.check-box:pressed > .box, .check-box:selected:pressed > .box
{
    -fx-background-color: #666666;
    -fx-border-color: #666666;
}

/* indeterminate */
.check-box:indeterminate > .box {
    -fx-padding: 3px;

    -fx-border-color: ACCENT_COLOR;
}

.check-box:indeterminate > .box > .mark {
    -fx-shape: null;

    -fx-pref-width: 10px;
    -fx-max-width: 10px;
    -fx-min-width: 10px;
    -fx-pref-height: 10px;
    -fx-max-height: 10px;
    -fx-min-height: 10px;

    -fx-background-color: #333333;
    /*-fx-background-insets: 3px;*/
}

/* -- indeterminate - pressed */
.check-box:indeterminate:pressed > .box > .mark {
    -fx-background-color: #666666;
}

.check-box:indeterminate:pressed > .box {
    -fx-background-color: white;
    -fx-border-color: #666666;
}

/* focused */

.check-box:focused > .box{
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    /* - first border is focus ring
       - second border is control border */
    -fx-border-color: black, #333333;
    -fx-border-width: 1, 2;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: segments(1, 2), solid;
    -fx-border-insets: -3, 0;
}

/* -- focused - selected */
.check-box:focused:selected > .box{
    -fx-border-color: black, ACCENT_COLOR;
}

/* -- focused - selected, hover */
.check-box:focused:selected:hover > .box{
    -fx-border-color: black, #333333;
}

/* -- focused - pressed */
.check-box:focused:pressed > .box{
    -fx-border-color: black, #666666;
}

.check-box:focused:selected:pressed > .box{
    -fx-border-color: black, #666666;
}

.check-box:focused:indeterminate:pressed > .box{
    -fx-border-color: black, #666666;
}

/* -- focused - indeterminate*/
.check-box:focused:indeterminate > .box {
    -fx-border-color: black, ACCENT_COLOR;
}

/* disabled */
.check-box:disabled
{
    -fx-opacity: 0.4;
}

.check-box:disabled > .box
{
    -fx-background-color: #cdcdcd;
    -fx-border-color: #aaa;
}



/*******************************************************************************
 *                                                                             *
 * Radio Button                                                                *
 *                                                                             *
 ******************************************************************************/

.radio-button {
    ACCENT_COLOR: #2796c4;

    -fx-text-fill: #212121;
}

.radio-button > .radio  {
    -fx-background-color: white;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-background-insets: 0;

    /* Two borders exist because of the focus ring, if they didn't the size of the control would change on focus
       - The first one is the border of the control
       - The second one is the border of the focus ring
       */
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 1.0em, 0;
    -fx-border-color: #333333, transparent;
    -fx-border-insets: 0px, -2px;
    -fx-border-width: 2px, 1px;

    -fx-padding: 3px; /* 4 -- padding from outside edge to the inner black dot */
}

.radio-button > .radio > .dot {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */

    -fx-padding: 5px; /* 3 -- radius of the inner black dot when selected */
}

/* hover */
.radio-button:hover > .radio {
    -fx-background-color: white;
    -fx-border-color: #333333, transparent;
}

.radio-button:selected:hover > .radio > .dot {
    -fx-background-color: #111;
}

/* selected */
.radio-button:selected > .radio {
    -fx-border-color: ACCENT_COLOR, transparent;
}

.radio-button:selected > .radio > .dot {
    -fx-background-color: #333333;
}

/* pressed */
.radio-button:pressed > .radio
{
    -fx-background-color: white;
    -fx-border-color: #999999, transparent;
}

.radio-button:pressed:selected > .radio > .dot
{
    -fx-background-color: #999999;
}

/* focused */
.radio-button:focused > .radio
{
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 1.0em, 0;
    -fx-border-color: #333333, #333333;
    -fx-border-insets: 0px, -2px;
    -fx-border-width: 2px, 1px;
}

.radio-button:focused:hover > .radio
{
    -fx-border-color: white, #e0e0e0;
}

.radio-button:focused:pressed > .radio, .radio-button:focused:selected:pressed > .radio
{
    -fx-border-color: #999999, #333333;
    -fx-background-color: white;
}

.radio-button:focused:selected > .radio {
    -fx-border-color: ACCENT_COLOR, #333333;
}

/* disabled */
.radio-button:disabled
{
    -fx-opacity: 0.4;
}

.radio-button:disabled > .radio
{
    -fx-border-color: #333333, transparent;
}

/*******************************************************************************
 *                                                                             *
 * Tooltip                                                                     *
 *                                                                             *
 ******************************************************************************/

.tooltip {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-background-radius: 0 0 0 0;

    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em;  /*4 8 4 8 */

    -fx-font-family: "PingFang SC", "Segoe UI Semilight", "Segoe UI Light", "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-text-fill: rgba(0, 0, 0, 0.6);

    -fx-border-color: #808080;
    -fx-border-width: 2px;

    -fx-effect: null;
}

/*******************************************************************************
 *                                                                             *
 * ScrollBar                                                                   *
 *                                                                             *
 ******************************************************************************/

.scroll-bar > .thumb{
    -fx-background-color: #cdcdcd;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.scroll-bar > .thumb:hover {
    -fx-background-color: #dadada;
}

.scroll-bar > .thumb:pressed {
    -fx-background-color: #606060;
}

.scroll-bar > .track {
    -fx-background-color: #f0f0f0;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}
.scroll-bar > .track-background {
    -fx-background-color: #f0f0f0;
    -fx-background-insets: 0;
}

.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
    -fx-background-color: #f0f0f0;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-padding: 0.25em; /* 3 */
}

.scroll-bar > .increment-button:hover,
.scroll-bar > .decrement-button:hover  {
    -fx-background-color: #dadada;
}

.scroll-bar > .increment-button:pressed,
.scroll-bar > .decrement-button:pressed {
    -fx-background-color: #606060;
}

.scroll-bar > .decrement-button > .decrement-arrow,
.scroll-bar > .increment-button > .increment-arrow{
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-background-color: transparent, #606060;
    -fx-effect: null;
}

.scroll-bar > .decrement-button:pressed > .decrement-arrow,
.scroll-bar > .increment-button:pressed > .increment-arrow {
    -fx-background-color: transparent, white;
    -fx-effect: null;
}

.scroll-bar:vertical > .increment-button > .increment-arrow,
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
}

.scroll-bar:horizontal > .increment-button > .increment-arrow,
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
}

.scroll-bar:disabled {
    -fx-opacity: 0.4;
}

/* ARROW SHAPES */
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-shape: "M11,17H8.111l-3.86-4.124l3.86-4.125H11l-3.375,4.125L11,17z";
}

.scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-shape: "M7.626,12.876L4.251,8.751H7.14L11,12.876L7.14,17H4.251L7.626,12.876z";
}

.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-shape: "M4,17v-2.889l4.124-3.86l4.125,3.86V17l-4.125-3.375L4,17z";
}

.scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-shape: "M8.124,13.625l4.125-3.375v2.889l-4.125,3.86L4,13.139V10.25L8.124,13.625z";
}

/*******************************************************************************
 *                                                                             *
 * ScrollPane                                                                  *
 *                                                                             *
 ******************************************************************************/

.scroll-pane {
    -fx-background-color: transparent, transparent;
}

.scroll-pane .corner {
    -fx-background-radius: 0 0 0 0;
    -fx-background-color: #f0f0f0;
    -fx-background-insets: 1 0 0 1; /* have the square on the corner be centered */
}


/*******************************************************************************
 *                                                                             *
 * ComboBox                                                                    *
 *                                                                             *
 ******************************************************************************/

.combo-box-base  {
    -fx-background-color: transparent, #bababa, transparent, white;
    -fx-background-radius: 0, 0, 0, 0;
    /*-fx-padding: 0em 0.166667em 0em 0.166667em;  0 2px 0 2px*/

    -fx-font-family: "PingFang SC", "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 1.333333em; /* 16 */
}

.combo-box-base:hover {
    -fx-background-color: transparent, #909090, transparent, white;
}

.combo-box-base:focused {
    -fx-background-color: transparent, #5c5c5c, transparent, white;
    -fx-background-insets: -1.4, 0, 1, 2;

    -fx-background-radius: 0, 0, 0, 0;
}

.combo-box-base:focused:hover {
    -fx-background-color: transparent, #909090, transparent, white;
}

.combo-box-base:disabled {
    -fx-opacity: .4;
}

/** */
.combo-box-base:editable>*.text-input {
    -fx-background-insets: 0, 2px 0 2px 2px;
}

/* OPEN BUTTON*/
.combo-box-base > .arrow-button {
    -fx-background-color: transparent, transparent, transparent;
}


.combo-box-base > .arrow-button > .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em; /* (2/3 * 4.25) 4 (2/3 * 4.25) 4 */
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: black;
}

/* LIST (Popup)*/
.combo-box-popup > .list-view {
    -fx-effect: null;
    /** -fx-pref-height: 200px; */
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-font-family: "PingFang SC", "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-padding: 4 0 4 5;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:hover{
    -fx-background-color: #dedede;
    -fx-text-fill: black;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected{
    -fx-background-color: #55c4fe;  /* TODO: this probably is the "active" color" */
}

/*******************************************************************************
 *                                                                             *
 * Rating (ControlsFX)                                                         *
 *                                                                             *
 ******************************************************************************/

.rating > .container > .button {
    -fx-background-color: #bababa;
    -fx-border-color: transparent;
    -fx-shape: "M147.421,249.541l6.152,4.854l-2.393,7.355l6.521-4.361l6.549,4.361l-2.393-7.355l6.152-4.854h-7.738l-2.571-7.396l-2.543,7.396H147.421z";
    -fx-background-image: null;
    -fx-padding: 16 16;
    -fx-background-image-repeat: no-repeat;
}
.rating > .container > .button.strong {
    -fx-background-color: #00828b;
    -fx-border-color: transparent;
    -fx-background-image: null;

}
.rating > .container:hover > .button.strong {
    -fx-background-color: #329aa3;
}

.rating > .container > .button:hover {
    -fx-effect: null;
}

.rating > .container:pressed > .button.strong {
    -fx-background-color: #25bbc4;
}

.rating > .container > .button:pressed {
    -fx-background-color: #25bbc4;
}

.rating:disabled{
    -fx-opacity: .6;
}

/*******************************************************************************
 *                                                                             *
 * TextBox (and PasswordBox)                                                   *
 *                                                                             *
 ******************************************************************************/
.text-field{
   /** -fx-skin: "impl.jfxtras.styles.jmetro8.MetroTextFieldSkin"; */
}

.text-input{
    -fx-background-radius: 0, 0;

    -fx-background-color: #bababa, white;
    -fx-background-insets: 0, 2;

    -fx-prompt-text-fill: #9f9f9f;
    -fx-font-size: 1.333333em; /* 16 */

    -fx-highlight-fill: #008287; /* TODO: this probably is the "active" color" */
    -fx-highlight-text-fill: white;
}

.text-input:hover{
    -fx-background-color: #8f8f8f, white;
}

.text-input:focused{
    -fx-background-color: #5c5c5c, white;
    -fx-text-fill: black;
}

/*.text-input > Pane{*/
    /*-fx-padding: 0.333333em 0.583em 0.333333em 0em; *//* 4 7 4 0 */
/*}*/

.text-input > .right-button{
    -fx-cursor: default;

    -fx-background-insets: -0.1666665em -0.45em -0.1666665em -0.45em; /* 4 7 4 7 -> this values are subtracted by 2px in em because of the border of the textfield */
}

.text-field > .right-button > .right-button-graphic {
    -fx-shape            : "M221.738,305.873l6.135,6.16l-2.875,2.863l-6.135-6.159l-6.263,6.237l-2.864-2.875l6.263-6.238l-6.177-6.202l2.875-2.863l6.177,6.201l6.244-6.22l2.864,2.876L221.738,305.873z";

    -fx-padding: 0.5em 0.5em; /* TODO: put the real number here 18 18 */
    -fx-background-color: black;
}

.text-input > .right-button:hover {
    -fx-background-color: #d9d9d9;
}

.text-input > .right-button:pressed {
    -fx-background-color: black;
}

.text-input > .right-button:pressed > .right-button-graphic {
    -fx-background-color: white;
}

.text-input:disabled
{
    -fx-opacity: 1;
    -fx-background-color: #d9d9d9, #eaeaea;
    -fx-text-fill: #adadad;
}

.item-title.disabled{
    -fx-text-fill: #adadad;
}

/*******************************************************************************
 *                                                                             *
 * PasswordBox                                                                 *
 *                                                                             *
 ******************************************************************************/

.password-field {
    -fx-skin: "impl.jfxtras.styles.jmetro8.MetroPasswordFieldSkin";
}

.password-field > .right-button > .right-button-graphic {
    -fx-shape            : "M307.688,399.564c0,1.484-1.203,2.688-2.688,2.688c-1.484,0-2.688-1.203-2.688-2.688s1.203-2.688,2.688-2.688C306.484,396.876,307.688,398.08,307.688,399.564z M297.5,399h2.5c0,0,1.063-4,5-4c3.688,0,5,4,5,4h2.5c0,0-2.063-6.5-7.5-6.5C299,392.5,297.5,399,297.5,399z";
    -fx-scale-shape: false;
    -fx-background-color: black;
}

/*******************************************************************************
 *                                                                             *
 * ProgressBar                                                                 *
 *                                                                             *
 ******************************************************************************/

.progress-bar > .track{
    -fx-background-color: #d9d9d9;
}

.progress-bar > .bar,
.progress-bar:indeterminate > .bar{
    -fx-background-color: #52c41a;
    -fx-padding: 3;
}

.progress-bar > .track,
.progress-bar > .bar {
    -fx-background-radius: 0;
    -fx-background-insets: 0;
}

/*******************************************************************************
 *                                                                             *
 * Slider                                                                      *
 *                                                                             *
 ******************************************************************************/

.slider {
    -fx-skin: "impl.jfxtras.styles.jmetro8.FilledSliderSkin";
}

.slider .thumb {
    -fx-background-color: black;
    -fx-background-insets: 0;
    -fx-background-radius: 0em;
    -fx-padding: 0.333333em; /* 4 */

    -fx-effect: null;
}
.slider:focused .thumb {
    -fx-background-radius: 0em;
}

.slider .track {
    -fx-background-color: #c6c6c6;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.333333em; /* This value must be equal to ".slider .thumb" padding */
}

.slider .fill {
    -fx-background-color: #00828b;
    -fx-padding: 0.333333em; /* This value must be equal to ".slider .thumb" padding */
}

.slider .fill:hover {
    -fx-background-color: #219297;
}

.slider .fill:pressed {
    -fx-background-color: #25bbc4;
}

/*******************************************************************************
 *                                                                             *
 * ToggleSwitch                                                                *
 *                                                                             *
 ******************************************************************************/
.toggle-switch .text {
    -fx-fill: black;
    -fx-font-size: 1em;
    -fx-font-family: "PingFang SC", "Segoe UI Semibold", "Segoe UI";
}

.toggle-switch .thumb {
    -fx-background-color: black;
    -fx-padding: 0.583333em 0.333333em 0.583333em 0.333333em;  /* 7 4 7 4*/
    -fx-background-radius: 0;
}

.toggle-switch .thumb-area{
    -fx-background-radius: 0;
}

.toggle-switch:selected .thumb-area{
    -fx-background-insets: 0, 1, 2;
    -fx-background-color: #a6a6a6, white, #219297; /* The last one is the accent color */
}

.toggle-switch .thumb-area{
    -fx-background-insets: 0, 1, 2;
    -fx-background-color: #a6a6a6, white, #a6a6a6;
}

.toggle-switch:selected:pressed .thumb-area{
    -fx-background-insets: 0, 1, 2;
    -fx-background-color: #a6a6a6, white, #25bbc4; /* The last one is the accent color */
}

.toggle-switch .thumb-area
{
    -fx-padding: 0.583333em 1.333333em 0.583333em 1.333333em; /* 7 16 7 16 */

}

.toggle-switch:disabled
{
    -fx-opacity: 0.4;
}

/*******************************************************************************
 *                                                                             *
 * ListSpinner (Jfxtras)                                                       *
 *                                                                             *
 ******************************************************************************/

.ListSpinner {
    -fx-skin: "impl.jfxtras.labs.internal.scene.control.skin.ListSpinnerCaspianSkin";
    -fx-background-color: #f0f0f0;
    -fx-background-insets: 0 0 0 0;
    -fx-background-radius: 0;
    -fx-padding: 0.266667em 0.233333em 0.25em 0.233333em;
    -fx-text-fill: #212121;
}

.ListSpinner:hover {
    -fx-color: #f0f0f0;
}

.ListSpinner:focused {
    -fx-color: -fx-focused-base;
    -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: -1.4, 0, 1, 2;
    -fx-background-radius: 6.4, 5, 4, 3;
}

.ListSpinner .valuePane {
    -fx-padding: 0.0em 0.2em 0.0em 0.2em;
}

.ListSpinner .left-arrow {
    -fx-shape: "M4,-4 L0,0 L4,4 Z";
    -fx-scale-shape: false;
}
.ListSpinner .right-arrow {
    -fx-shape: "M0,-4 L4,0 L0,4 Z";
    -fx-scale-shape: false;
}
.ListSpinner .down-arrow {
    -fx-shape: "M-4,-2 L0,2 L4,-2 Z";
    -fx-scale-shape: false;
}
.ListSpinner .up-arrow {
    -fx-shape: "M4,2 L-4,2 L0,-2 Z";
    -fx-scale-shape: false;
}
.ListSpinner .idle {
    -fx-background-color: -fx-mark-color;
}
.ListSpinner .clicked {
    -fx-background-color: -fx-focus-color;
}

/*******************************************************************************
 *                                                                             *
 * Spinner                                                                     *
 *                                                                             *
 ******************************************************************************/

.spinner {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.spinner > .text-field{
    -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin";
}

.spinner > .text-field {
    -fx-background-color: #f0f0f0;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.spinner .increment-arrow-button, .spinner .decrement-arrow-button  {
    -fx-background-color: #f0f0f0;
    /*Change the two 0's here to -1 to get rid of the horizontal line */
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.spinner .increment-arrow-button .increment-arrow, .spinner .decrement-arrow-button .decrement-arrow {
    -fx-background-color: -fx-mark-color;
}


.spinner .increment-arrow-button:hover, .spinner .decrement-arrow-button:hover {
    -fx-background-color: #dadada;
}

.spinner .increment-arrow-button:pressed, .spinner .decrement-arrow-button:pressed {
    -fx-background-color: #606060;
}

.spinner.split-arrows-horizontal .increment-arrow-button:pressed .increment-arrow, .spinner.split-arrows-horizontal .decrement-arrow-button:pressed .decrement-arrow{
    -fx-background-color: white;
}


/*******************************************************************************
 *                                                                             *
 * DatePicker                                                                  *
 *                                                                             *
 ******************************************************************************/
.date-picker > .arrow-button > .arrow {
    -fx-shape: "M0,0v9h9V0H0z M2,8H1V7h1V8z M2,6H1V5h1V6z M2,4H1V3h1V4z M4,8H3V7h1V8z M4,6H3V5h1V6z M4,4H3V3h1V4z M6,8H5V7h1V8z M6,6H5 V5h1V6z M6,4H5V3h1V4z M8,8H7V7h1V8z M8,6H7V5h1V6z M8,4H7V3h1V4z";
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.416667em 0.416667em 0.333333em 0.333333em; /* 5 5 4 4 */
    -fx-scale-shape: true;
}

.date-picker .text-field{
    -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin";
}

.date-picker .text-input{
    -fx-background-radius: 0, 0;

    -fx-background-color: transparent, white;
    -fx-background-insets: 2, 2;
}

.date-picker > .arrow-button:hover {
    -fx-background-color: #d9d9d9;
    -fx-background-insets: 3 3 3 3;
    -fx-background-radius: 0;
}

.date-picker > .arrow-button:pressed {
    -fx-background-color: black;
}

.date-picker > .arrow-button:pressed > .arrow {
    -fx-background-color: white;
}

.date-picker-popup {
    -fx-background-color: white;
    -fx-background-insets: 0;
}

.date-picker-popup > .month-year-pane {
    -fx-background-color: white;
    -fx-background-insets: 0;
}

.date-picker-popup > * > .spinner > .button {
    -fx-padding: 0.25em 0.583333em 0.25em 0.583333em; /* 3 7 3 7 */
}

.date-picker-popup > * > .spinner > .button {
    -fx-background-color: white;
    -fx-background-insets: 0;
}

.date-picker-popup > * > .spinner {
    -fx-background-color: white;
    -fx-background-insets: 0;
}

.date-picker-popup > * > .spinner > .button:hover {
    -fx-background-color: #dadada;
}

.date-picker-popup > * > .spinner > .button:armed {
    -fx-background-color: #606060;
}

.date-picker-popup > * > .spinner > .button > .left-arrow,
.date-picker-popup > * > .spinner > .button > .right-arrow {
    -fx-background-color: #606060;
    -fx-background-insets: 0;
    -fx-effect: null;
}

.date-picker-popup > * > .spinner > .button:pressed > .left-arrow,
.date-picker-popup > * > .spinner > .button:pressed > .right-arrow {
    -fx-background-color: white;
    -fx-background-insets: 0;
}

.date-picker-popup > .calendar-grid {
    -fx-background-color: white;
    /*-fx-background-insets: 1 0 0 0;*/
    -fx-padding: 0;
}

.date-picker-popup > * > .previous-month,
.date-picker-popup > * > .next-month {
    -fx-background-color: white;
    -fx-opacity: 0.3;
}

.date-picker-popup > * > .day-name-cell,
.date-picker-popup > * > .week-number-cell {
    -fx-font-size: 0.75em;
    -fx-font-family: "PingFang SC", "Segoe UI Semibold", "Segoe UI", Helvetica, Arial, sans-serif;
}

/*******************************************************************************
 *                                                                             *
 * Choice Box                                                                   *
 *                                                                             *
 ******************************************************************************/

.choice-box  {
    -fx-background-color: transparent, #cccccc, transparent, #cccccc;
    -fx-background-radius: 0, 0, 0, 0;
    -fx-background-insets: -1.4, 0, 1, 2;

    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/

    -fx-font-family: "PingFang SC", "Segoe UI";
    -fx-font-size: 1.166667em; /* 14 */
}

.choice-box:hover {
    -fx-background-color: transparent, #7a7a7a, transparent, #cccccc;
}

.choice-box:focused {
    -fx-background-color: transparent, #7a7a7a, transparent, #cccccc;
}

.choice-box:focused:hover {
    -fx-background-color: transparent, #7a7a7a, transparent, #cccccc;
}

.choice-box:disabled {
    -fx-opacity: .4;
}

/*******************************************************************************
 *                                                                             *
 * List Box                                                                    *
 *                                                                             *
 ******************************************************************************/

.list-view {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-padding: 0;

    -fx-border-color: #a4a4a4;
    -fx-border-width: 2px;
}

.list-view:focused {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-padding: 1em 2em 1em 2em;
    -fx-font-family: "PingFang SC", "Segoe UI", Helvetica, Arial, sans-serif;
}

.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-background-color: white;
}

.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:focused {
    -fx-background-color: #d3d3d3;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-background-color: white;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused {
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
}

/*******************************************************************************
 *                                                                             *
 * Table View                                                                  *
 *                                                                             *
 ******************************************************************************/

.table-view{
    /* This is a var */
    TABLE_VIEW_BORDER_COLOR: #f4f4f4;
    LIGHT_ACCENT_COLOR: #e6f7ff;
    ACCENT_COLOR: #1550bd;

    -fx-cell-focus-inner-border: LIGHT_ACCENT_COLOR; /* focused */
    -fx-background-color: transparent, white;
    -fx-padding: 0 0px;
}

.table-row-cell:empty {
    -fx-background-color: white;
}

.table-row-cell:empty .table-cell {
    -fx-border-width: 0px;
}

/****** Column Header ******/

.table-view .column-header-background {
    -fx-background-color: white;
}

.table-view .column-header, .table-view .filler{
    /* borders around table header */
    -fx-background-color: white;
    -fx-border-color: transparent transparent TABLE_VIEW_BORDER_COLOR transparent;
}

.table-view .filler {
    -fx-background-color: transparent, white;
    -fx-background-insets: 0 0 0 0, 1 0 1 0;
}

.table-view .column-header:last-visible {
    -fx-border-color: transparent transparent TABLE_VIEW_BORDER_COLOR transparent;
}

.table-view .filler {
    -fx-border-color: transparent transparent TABLE_VIEW_BORDER_COLOR transparent;
}

.table-view .column-header .label{
    -fx-text-fill: #111;
    -fx-font-family: "PingFang SC", "Segoe UI SemiBold";
    -fx-font-size: 1.166667em;  /* 14 */
    -fx-alignment: center-left;

    -fx-padding: 0.666666em 0.5em 0.666666em 0.5em;
}

.table-view .column-header:hover{
    -fx-background-color: LIGHT_ACCENT_COLOR;
}

.table-view .column-header.table-column-selected {
    -fx-background: white;
    -fx-border-color: #034f95 #034f95 transparent #034f95;
    -fx-border-width: 2px;
}

/* Header Sort Arrows */
.table-view /*> column-header-background > nested-column-header >*/ .arrow {
    -fx-padding: 0.5em 0.3125em 0.5em 0.3125em; /* 3 3.75 3 3.75 */
    -fx-shape: "M26.488,211.891h17.656V53H81L35.316,0L-13,53h39.488V211.891z";
}

/****** Table View "body"  ******/

.table-cell {
    -fx-border-color: transparent transparent transparent transparent;
    -fx-font-family: "PingFang SC", "Segoe UI";
    -fx-font-size: 14px;  /* 14 */
    -fx-alignment: center-left;
    -fx-padding: 0.833333em 0.5em 0.5em 0.5em;
}

.table-row-cell:selected{
    -fx-background: LIGHT_ACCENT_COLOR;
    -fx-border-color: LIGHT_ACCENT_COLOR;
}

.table-cell:selected {
    -fx-background: LIGHT_ACCENT_COLOR;
    -fx-border-color: #034f95;
}

.text-field-table-cell .text-field {
   -fx-pref-height: 24px;
   -fx-max-height: 24px;
   -fx-font-size: 14px;
   -fx-padding: 4px;
}
.combo-box-table-cell .combo-box-base  {
   -fx-pref-height: 24px;
   -fx-max-height: 24px;
   -fx-font-size: 14px;
   -fx-padding: 4px;
}


/*******************************************************************************
 *                                                                             *
 * TreeView                                                                    *
 *                                                                             *
 ******************************************************************************/

.tree-view {
    HOVER_COLOR: #ccc;
    PRESSED_COLOR: derive(HOVER_COLOR, -30%);
    ACCENT_COLOR: #1550bd;

    -fx-background-color: white;
    -fx-padding: 0;
    -fx-background-insets: 0;
}

.tree-view .tree-cell {
    -fx-font-size: 1.166667em; /* 14 */
    -fx-padding: 1em;
}

/********** Label **********/
.tree-view .tree-cell .label{
    -fx-font-family: "PingFang SC", "Segoe UI";

    -fx-padding: 0 3px 0 0;
}

/* Hover */
.tree-view .tree-cell:filled:hover {
    -fx-background-color: HOVER_COLOR;
}

/* Selected */
.tree-view .tree-cell:filled:selected {
    -fx-background-color: ACCENT_COLOR;
    -fx-table-cell-border-color: transparent;
}

/* Selected hover */
.tree-view .tree-cell:filled:selected:hover, .tree-view .tree-cell:selected:hover {
    -fx-background-color: derive(ACCENT_COLOR, -30%);
}

/* Pressed */
.tree-view .tree-cell:filled:pressed, .tree-view .tree-cell:filled:selected:pressed, .tree-view .tree-cell:selected:pressed, .tree-view .tree-cell:pressed{
    -fx-background-color: PRESSED_COLOR;
}

/*********** Expand/Collapse icon **********/
.tree-cell > .tree-disclosure-node {
    -fx-padding: 0.333333em 1em 0.333333em 1em;
}

.tree-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: -fx-text-background-color;
    -fx-padding: 0.416667em 0.333333em 0.416667em 0.333333em;
    -fx-shape: "M8.06,20.938L7,20l8-8L7,4l1.06-0.938L16.917,12L8.06,20.938z";
}

.tree-cell:expanded > .tree-disclosure-node > .arrow {
    -fx-scale-y: -1;
    -fx-rotate: 90;
}

/*******************************************************************************
 *                                                                             *
 * TabPane and Tabs                                                            *
 *                                                                             *
 ******************************************************************************/

.tab-pane {
    ACCENT_COLOR: #1550bd;

    -fx-tab-min-height: 2.91666375em; /* 34 */
    -fx-tab-max-height: 2.91666375em; /* 34 */
}

.tab-pane > .tab-header-area {
    -fx-padding: 0 0.166667em 0em 0.416667em; /* 0 2 5 5 */
}

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-color: transparent, transparent, white;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
    -fx-padding: 0.083333em 1.5em 0.0769em 1.5em; /* 1 18 0.99 18 */
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: transparent, #cccccc, white;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-text-fill: #767676;
    -fx-font-size: 1.333333em; /* 16 */
    -fx-font-family: "PingFang SC", "Segoe UI";
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
    -fx-text-fill: ACCENT_COLOR;
}

.tab-pane > .tab-header-area > .headers-region > .tab:hover > .tab-container > .tab-label {
    -fx-text-fill: ACCENT_COLOR;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color:
            -fx-outer-border,
            transparent,
            white;
    -fx-background-insets: 1 1 0 1, 0 0 1 0, 1;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 0, 0;
    -fx-border-color: transparent, transparent;
}

/*******************************************************************************
 *                                                                             *
 * Context Menu, Menus, MenuBar and MenuItem                                   *
 *                                                                             *
 ******************************************************************************/

/****************************** Context Menu **********************************/

.context-menu {
    -fx-background-color: #f2f2f2;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
    -fx-padding: 0.5em 0em 0.5em 0em; /* 6 0 6 0 */

    -fx-border-color: #cccccc;
    -fx-border-style: solid;
}

/********************************* Menu Bar ************************************/

.menu-bar {
    -fx-background-color: white;
    -fx-background-insets: 0 0 0 0;
    -fx-font-family: "PingFang SC", "Segoe UI";
    -fx-font-size: 1.166667em; /* 14 */
}

.menu-bar > .container > .menu-button {
    -fx-padding: 0.5em 0.666667em 0.5em 0.666667em; /* 6 8 6 8 */
}

.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing {
    -fx-background-color: #dadada;
}

.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing  > .label {
    -fx-text-fill: #393939;
}

/********************************* Menu Item ***********************************/

.menu-item {
    -fx-text-fill: #393939;
    -fx-background-color: transparent;
    -fx-padding: 0.583333em 1em 0.583333em 1em;   /*7 12 7 12 */
}

.menu-item .label {
    -fx-padding: 0em 1.333332em 0em 0em;
    -fx-text-fill: #212121;
    -fx-font-family: "PingFang SC", "Segoe UI";
    -fx-font-size: 1.166667em; /* 14 */
}

.menu-item > .graphic-container {
    -fx-padding: 0em 0.75em 0em 0em;
}

.radio-menu-item:checked > .left-container > .radio {
    -fx-shape: "M17.939,5.439L7.5,15.889l-5.439-5.449l0.879-0.879L7.5,14.111 l9.561-9.551L17.939,5.439z";

    -fx-padding: 5px 7px 5px 7px;
    -fx-scale-shape: true;
}

.check-menu-item:checked > .left-container > .check {
    -fx-shape: "M17.939,5.439L7.5,15.889l-5.439-5.449l0.879-0.879L7.5,14.111 l9.561-9.551L17.939,5.439z";

    -fx-padding: 5px 7px 5px 7px;
    -fx-scale-shape: true;
}

.check-menu-item:checked > .left-container {
    -fx-padding: 0em 1em 0em 0.5em;
}

.radio-menu-item:checked > .left-container {
    -fx-padding: 0em 1em 0em 0.5em;
}

.menu > .right-container > .arrow {
    -fx-padding: 0.458em 0.333333em 0.458em 0.333333em; /* >5 4 >5 4 */
    -fx-shape: "M8.06,20.938L7,20l8-8L7,4l1.06-0.938L16.917,12L8.06,20.938z";
    -fx-scale-shape: true;
}

.radio-menu-item:checked > .left-container > .radio, .check-menu-item:checked > .left-container > .check, .menu > .right-container > .arrow {
    -fx-background-color: #0a0a0a;
}

/* hover */
.menu-item:hover, .menu-item:focused {
    -fx-background-color: #dadada;
}

/* pressed */
.menu-item:pressed {
    -fx-background-color: #c2c2c2;
}

/* separator */
.context-menu .separator {
    -fx-padding: 0.58333275em 1em 0.58333275em 1em;  /*7 12 7 12 */
}

.context-menu .separator:horizontal .line {
    -fx-border-color: #c3c3c3 transparent transparent transparent;
    -fx-border-insets: 0;
}



